<!doctype html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>无标题文档</title>
    <style type="text/css">
        *{margin:0;padding:0}
        html,body{height:100%}
        .spirit{position:absolute;width:50px;height:50px;background-color:red;}
        #canvas{position:relative;width:100%;height:200px;background-color:#ccc}
    </style>
    <style type="text/css"></style></head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
    var canvas = document.getElementById("canvas"),
            spirit,
            startX,
            startY;
    function touchStart(event) {
        //阻止网页默认动作（即网页滚动）
        event.preventDefault();
        if (spirit || !event.touches.length) return;
        var touch = event.touches[0];
        startX = touch.pageX;
        startY = touch.pageY;
        spirit = document.createElement("div");
        canvas.appendChild(spirit);
        spirit.className = "spirit";
        spirit.style.left = startX + "px";
        spirit.style.top = startY + "px"
    }
    function touchMove(event) {
        event.preventDefault();
        if (!spirit || !event.touches.length) return;
        var touch = event.touches[0],
                x = touch.pageX - startX,
                y = touch.pageY - startY;
        //这里是为了手指一定是横向滚动的,原理是计算X位置的偏移要比Y的偏移大
        if (Math.abs(x) > Math.abs(y)) {
            spirit.style.left = touch.pageX + "px";
            spirit.style.top = touch.pageY + "px"
        }
    }
    function touchEnd(event) {
        if (!spirit) return;
        canvas.removeChild(spirit);
        spirit = null
    }
    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("touchmove", touchMove, false);
    canvas.addEventListener("touchend", touchEnd, false);
</script>
</body></html>